<template>
	<view class="content">
		<view class="header" :style="{'margin-top':tops+'px'}">
			<view class="back" @click="goBack">
				<image src="../../static/9.png"></image>
			</view>
			<view class="name">添加用货种类</view>
			<view class="history" @click="history">历史记录</view>
		</view>

		<view class="formCon">
			<view class="li_2" @click="openFood">
				<input type="text" placeholder="用户侧重点" />
				<view class="picker-box" >
					<image style="width: 50rpx;" class="icon" src="../../static/2.png"></image>
				</view>
				
			</view>
		
			<view class="li"
				style="width: 97%;height: auto;;border-radius: 10rpx;border: 1rpx solid #ccc;padding-left: 15rpx;font-size: 26rpx;padding-top: 10rpx;margin-bottom: 20px;">
				<textarea v-model="formData.yonghuocezhongdian"></textarea>
			</view>
			<view style="border: 1rpx solid #ccc;border-radius: 10rpx;padding-top: 10rpx;padding-bottom: 10rpx;">
				<view class="li" style="flex-wrap: nowrap;height: 80rpx;width: 95%;margin: auto;margin-top: 10rpx;" v-for="(item,index) in formData.koushuyonghuozhonglei">
				  <input type="text" v-model="item.one" placeholder="口述用货种类"/>
				  <input type="text" v-model="item.two" placeholder="单次拿货体量"/>
				  <input type="text" v-model="item.three" placeholder="年用货体量"/>
				</view>
				<image @click="add_koushuyonghuozhonglei" class="add_icon" src="../../static/6.png"></image>
				<view class="li"
					style="width: 92.5%;height: auto;margin: auto;border-radius: 10rpx;border: 1rpx solid #ccc;padding-left: 15rpx;font-size: 26rpx;margin-top: 10rpx;padding-top: 20rpx;">
					<textarea v-model="formData.koushuyonghuozhonglei_miaoshu" placeholder="直接编辑描述"></textarea>
				</view>
			</view>
		  <view style="border: 1rpx solid #ccc;border-radius: 10rpx;padding-top: 10rpx;padding-bottom: 10rpx;">
		  	<view class="li" style="flex-wrap: nowrap;height: 80rpx;width: 95%;margin: auto;margin-top: 10rpx;" v-for="(item,index) in formData.shijiyonghuozhonglei">
		  	  <input type="text" v-model="item.one" placeholder="口述用货种类"/>
		  	  <input type="text" v-model="item.two" placeholder="单次拿货体量"/>
		  	  <input type="text" v-model="item.three" placeholder="年用货体量"/>
		  	</view>
		  	<image @click="add_shijiyonghuozhonglei" class="add_icon" src="../../static/6.png"></image>
		  	<view class="li"
		  		style="width: 92.5%;height: auto;margin: auto;border-radius: 10rpx;border: 1rpx solid #ccc;padding-left: 15rpx;font-size: 26rpx;margin-top: 10rpx;padding-top: 20rpx;">
		  		<textarea v-model="formData.shijiyonghuozhonglei_miaoshu" placeholder="直接编辑描述"></textarea>
		  	</view>
		  </view>
			
			
			<view class="li_2" >
				<input type="text" placeholder="客户口述能接受的付款方式" />
				<view class="picker-box" >
					<image style="width: 50rpx;" class="icon" src="../../static/2.png"></image>
				</view>
				
			</view>
			<view class="li"
				style="width: 97%;height: auto;;border-radius: 10rpx;border: 1rpx solid #ccc;padding-left: 15rpx;font-size: 26rpx;padding-top: 10rpx;">
				<textarea v-model="formData.kehukoushufukuanfangshi" placeholder="客户口述能接受的付款方式(可点击多选也可自行添加) "></textarea>
			</view>
			
			<view class="li_2">
				<input type="text" placeholder="客户实际能接受的付款方式" />
				<view class="picker-box" >
					<image style="width: 50rpx;" class="icon" src="../../static/2.png"></image>
				</view>
				
			</view>
			<view class="li"
				style="width: 97%;height: auto;;border-radius: 10rpx;border: 1rpx solid #ccc;padding-left: 15rpx;font-size: 26rpx;padding-top: 10rpx;">
				<textarea v-model="formData.kehushijifukuanfangshi" placeholder="客户实际能接受的付款方式(可点击多选也可自行添加) "></textarea>
			</view>
			
			<!-- <view class="li">
				<input type="text" placeholder="公司/档口名(必填)" />
				<input type="text" placeholder="微信号" />
			</view> -->

			
		</view>
 
		<button class="btn" @click="saveFormData">保存</button>
		  <niceui-popup-select ref="showFood" :columns="foods" :selectValue="foodId"
		          :option="{label:'name', value:'id'}" @confirm="confirmFood"></niceui-popup-select>
	</view>
</template>

<script>
	import NiceuiPopupSelect from  '@/uni_modules/niceui-popup-select/components/niceui-popup-select/niceui-popup-select'
	import {
		put_kehu,
		list_kehu
	} from "@/utils/api.js";
	export default {
		
		data() {
			return {
				
				foodId:[],
				foodName:[],
				tabList: [{
						text: '客户资料'
					},
					{
						text: '附件'
					}
				],
				tabActive: 0,
				array: [{
						name: '男',
						value: 0
					},
					{
						name: '女',
						value: 1
					}
				],
				sexIndex: -1,
				tops: 0,
				height: 0,
				classes: '',
				
				formData:{
				  yonghuocezhongdian: "",
				  koushuyonghuozhonglei: [{
					  one:'',
					  two:'',
					  three:''
				  }],
				  koushuyonghuozhonglei_miaoshu: "",
				  shijiyonghuozhonglei: [{
					  one:'',
					  two:'',
					  three:''
				  }],
				  shijiyonghuozhonglei_miaoshu: "",
				  kehukoushufukuanfangshi: "",
				  kehushijifukuanfangshi: "",
				  user_id:uni.getStorageSync('userInfo').user_id
				},
				kehu_id:''
			}
		},
		components:{
			NiceuiPopupSelect
			},
		 computed:{
			resultFruit(){
				return this.fruitName.join(",");
			},
			resultFood(){
				return this.foodName.join(",");
			},
			resultCountry(){
				return this.countryName.join(",");
			}
				},
		    onLoad(options) {
            this.kehu_id = options.kehu_id
			if(this.kehu_id){
				this.getIinfo()
				}
			uni.getSystemInfo({

				success: (e) => {

					this.tops = e.statusBarHeight;

					let custom = uni.getMenuButtonBoundingClientRect();

					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;

				}

			})

		},
		methods: {
			
			async getIinfo(){
				let that = this
				let data = {
					user_id:uni.getStorageSync('userInfo').user_id,
					kehu_id:that.kehu_id
				}
				let res = await list_kehu(data,that.kehu_id);
				console.log('客户信息',res.results)
				res.results.koushuyonghuozhonglei = JSON.parse(res.results.koushuyonghuozhonglei)
				if(res.results.koushuyonghuozhonglei.length == 0){
					res.results.koushuyonghuozhonglei.push({
						one:'',
						two:'',
						three:''
					})
				}
				res.results.shijiyonghuozhonglei = JSON.parse(res.results.shijiyonghuozhonglei)
				if(res.results.shijiyonghuozhonglei.length == 0){
					res.results.shijiyonghuozhonglei.push({
						one:'',
						two:'',
						three:''
					})
				}
				that.formData = res.results
				
				
			},
			
			async saveFormData(){
				let that = this
				that.formData.koushuyonghuozhonglei = JSON.stringify(that.formData.koushuyonghuozhonglei)
				that.formData.shijiyonghuozhonglei = JSON.stringify(that.formData.shijiyonghuozhonglei)
				that.formData.dangkou_img_list= JSON.stringify(that.formData.dangkou_img_list)
				that.formData.fangchanzheng_img_list= JSON.stringify(that.formData.fangchanzheng_img_list)
				that.formData.qitarenwuguanxi= JSON.stringify(that.formData.qitarenwuguanxi)
				that.formData.qiti_img_list= JSON.stringify(that.formData.qiti_img_list)
				that.formData.shenfenzheng_img_list= JSON.stringify(that.formData.shenfenzheng_img_list)
				that.formData.xingshizheng_img_list= JSON.stringify(that.formData.xingshizheng_img_list)
				let res = await put_kehu(that.formData,that.kehu_id)
				console.log('修改状态', res)
				if (res.code == 0) {
					uni.showToast({
					    title: '修改成功',
					    //icon: 'none',
					    duration: 2000
					});
				    uni.navigateBack()
				}
			},
			
			add_koushuyonghuozhonglei(){
				this.formData.koushuyonghuozhonglei.push({
					  one:'',
					  two:'',
					  three:''
				  })
			},
			add_shijiyonghuozhonglei(){
				this.formData.shijiyonghuozhonglei.push({
					  one:'',
					  two:'',
					  three:''
				  })
			},
			
			goBack() {
				uni.navigateBack()
			},
			openFood(){
				  this.$refs.showFood.showPopup()
			},
			confirmFood(value,data) {
				this.foodId = value
				this.foodName = data.map(it=>it.name)
				console.log(666,value,data)
				this.$refs.showFood.closePopup()
			},

			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			
			history() {
				uni.navigateTo({
					url: '/pages/goodsTypeHistory/index'
				})
			},

			getMapLocation() {
				let that = this
				uni.chooseLocation({
					success: (res) => {
						// 将获取到的地址信息存储
						this.address = res.address
						console.log(666, res)
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: "是否授权当前位置",
										content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success: (tip) => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data
															.authSetting[
																'scope.userLocation'
															] === true
														) {
															uni.showToast({
																title: "授权成功",
																icon: "success",
																duration: 1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (
																	res
																) => {
																	// 将获取到的地址信息存储
																	this.address =
																		res
																		.address
																}
															})
														} else {
															uni.showToast({
																title: "授权失败",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: "调用授权窗口失败",
									icon: "none",
									duration: 1000
								})
							}
						})
					}
				});
			},

		}
	}
</script>

<style>
	.add_icon{
		width: 70rpx;
		height: 70rpx;
		margin: auto;
		display: block;
		margin-top: 10rpx;
	}
	.header {
		width: 100%;
		height: 100rpx;
		line-height: 90rpx;
		position: fixed;
		top: 0;
		z-index: 1000000;
		text-align: center;
		background-color: white;
	}

	.header .back {
		height: 100%;
		width: 40rpx;
		margin-left: 30rpx;
		float: left;
		display: flex;
		align-items: center;
	}
	.header .back image{
		width: 20rpx;
		height: 40rpx;
		
	}

	.header .name {
		height: 100%;
		line-height: 90rpx;
		margin-top: 7rpx;
	}

	.header .history {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		text-align: center;
		position: absolute;
		right: 50rpx;
		top: 22rpx;
		color: white;
		background-color: #008BDE;
	}
	
	/*#ifdef MP-WEIXIN*/
	.header .name {
		width: 35%;
		line-height: 90rpx;
		margin-right: 50rpx;
		float: left;
	}
	
	.header .history {
		float: left;
		position: initial;
		color: white;
		background-color: #008BDE;
		margin-top: 20rpx;
	}
	
	/*#endif*/
	.tabList {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #008BDE;
		margin: auto;
		margin-top: 130rpx;
		/*#ifdef MP-WEIXIN*/
		margin-top: 200rpx;
		/*#endif*/
		display: flex;
	}

	.tabList .li {
		width: 50%;
		text-align: center;
		color: #008BDE;
	}

	.tabActive {
		background-color: #008BDE;
		color: white !important;
	}

	.formCon {
		width: 90%;
		margin: auto;
		margin-top: 120rpx;
		/*#ifdef MP-WEIXIN*/
		margin-top: 200rpx;
		/*#endif*/
	}

	.formCon .li {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.formCon .li input {
		width: 44%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
	}

	.formCon .li .picker-box {
		width: 44%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
		position: relative;
	}

	.formCon .li .picker-box view {
		margin-top: 22rpx;
	}

	.formCon .li .picker-box image {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 20rpx;
		top: 18rpx;
	}

	.formCon .li_1 {
		display: flex;
		margin-top: 20rpx;
	}

	.formCon .li_1 input {
		width: 86%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
	}

	.formCon .li_1 image {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		margin-top: 14rpx;
	}

	.formCon .li_2 {
		display: flex;
		margin-top: 20rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
	}

	.formCon .li_2 input {
		width: 86%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.formCon .li_2 image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		margin-top: 14rpx;
	}

	.addOther {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #008BDE;
		color: white;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.addOther view {
		margin-left: 50rpx;
	}

	.addOther image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 13rpx;
		margin-right: 50rpx;
	}

	.formConImg {
		width: 90%;
		margin: auto;
		margin-top: 30rpx;
	}

	.formConImg .title {
		display: flex;
	}

	.formConImg .title .line {
		width: 7rpx;
		height: 40rpx;
		margin-top: 6rpx;
		background-color: #008BDE;
	}

	.formConImg .title .text {
		margin-left: 20rpx;
	}

	.formConImg .li {
		margin-top: 40rpx;
	}

	.imgList {
		margin-top: 20rpx;
	}

	/deep/ .icon-add {
		width: 50rpx;
	}

	.btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: white;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
	}
	/deep/ .input-value-border{
		border: 0;
	}
	/deep/ .uni-data-tree-input{
		opacity: 0;
	}
	textarea{
		font-size: 26rpx;
	}
</style>